<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="inp" type="button" value="点击我"/>
    <script type="text/javascript" charset="utf-8">
        /**
         * 1.程序启动的时候里面的代码直接执行了
         * 2.内部的成员变量外部无法访问（除了不加var修饰的变量）
         */
//        (function () {
//            alert('我执行了...');
//        })()
        (function (window,undefined) {
            //$最常用的对象，返回给外界
            //大型程序开发，一般使用'_'作为私用的对象返回给外界
            window.$ = _$;
            function _$(arguments) {
                //正则表达式匹配id
                var idSelector = /#\w+/;
                //此属性接受得到的元素
                this.dom;
                if(idSelector.test(arguments[0])){
                    this.dom = document.getElementById(arguments[0].substring(1));
                }else{
                    throw new Error('arguments is error');
                }
            }
            //在Function类扩展一个可以实现链式编程的方法
            Function.prototype.method = function (methodName,fn) {
                this.prototype[methodName] = fn;
                return this;

            }
            _$.prototype = {
                constructor:_$,
                addEvent:function (type,fn) {
                    //如果是火狐浏览器
                    if(window.addEventListener){
                        this.dom.addEventListener(type,fn);
                    }else if(window.attachEvent){
                        this.dom.attachEvent('on'+type,fn);
                    }
                    return this;
                },
                setStyle:function (prop,val) {
                    this.dom.style[prop] = val;
                    return this;
                }
            }
            _$.onReady = function (fn) {
                //实例化出来的_$s对象，真正注册到window上
                window.$ = function () {
                    return new _$(arguments);
                }
                //执行传入进来的代码
                fn();
                //实现链式编程
                _$.method('addEvent',function () {
                }).method('setStyle',function () {
                })
            }
        })(window);  //程序入口windw传入作用域中
        $.onReady(function () {
            var inp = $('#inp');
            //alert(inp.dom.nodeName);
            inp.addEvent('click',function () {
                alert('我被点击了...');
            }).setStyle('backgroundColor','red');
        });
    </script>
</body>
</html>